<template>
  <PageContent inner-border :padding="false">
    <template slot="toolbar">
      <ActionButton @click="onValidate" icon="planar-drxx07" content="保存" />
      <div style="flex:1"></div>
    </template>
    <Form
      ref="form"
      :model="formData"
      :rules="formRules"
      :label-width="80"
      class="editor-forms"
    >
      <FormItem label="接口名称" prop="name">
        <Input type="text" v-model="formData.name" placeholder="填写接口名称..." />
      </FormItem>
      <FormItem label="接口地址" prop="addr">
        <Input type="text" v-model="formData.addr" placeholder="填写接口地址..." />
      </FormItem>
    </Form>
  </PageContent>
</template>

<script>
import mixin from "./mixin";
export default {
  mixins: [mixin],
  data() {
    return {
      formData: {
        name: "",
        addr: "",
      },
      formRules: {
        name: [{ required: true, message: "必填项", trigger: "blur" }],
        addr: [{ required: true, message: "必填项", trigger: "blur" }],
      },
    };
  },
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler(value) {
        this.parseParams(value);
      },
    },
  },
  methods: {
    parseParams(params) {
      const { meta } = params || { meta: { name: "", addr: "" } };
      this.formData = { ...meta };
    },
    onSubmit() {
      const { addr, name } = this.formData;
      this.config.webapi.apis[name] = addr;
      this.$emit("change", this.config);
    },
    onValidate() {
      this.$refs.form.validate((valid) => {
        valid && this.onSubmit();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.editor-forms {
  margin-top: 8px;
  padding: 8px;
  width: 600px;
}
</style>
